﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
    <script type="text/javascript">

        var personViewModel = function (firstName, lastName) {
            var self = this;
            self.firstName = ko.observable(firstName);
            self.lastName = ko.observable(lastName);
            self.fullName = ko.computed(function () {
                return self.firstName() + ", " + self.lastName();
            });
        }

        var personsListViewModel = function () {
            var self = this;
            self.maxID = 1;
            self.isFetchInProgress = ko.observable(false);
            self.maxAllowedID = 50;
            self.scrollGap = 100; // offset in pixel of scrollbar when you would like to fetch more data
            self.persons = ko.observableArray([]);

            $(window).scroll(function () {
                if (!self.isFetchInProgress() && self.maxID < self.maxAllowedID) {
                    if ($(window).scrollTop() >= $(document).height() - $(window).height() - self.scrollGap) {
                        self.isFetchInProgress(true);
                        self.fetchPersons();
                        self.isFetchInProgress(false);
                    }
                }
            });

            self.fetchPersons = function () {

                for (var i = 0; i < 10; i++) {
                    self.persons.push(new personViewModel("First Name " + self.maxID, "Last Name " + self.maxID));
                    self.maxID++;
                }

            }
        }
    
    </script>
    
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>
